<template>
    <div class="recommendedsonglist">
        <h3>最新音乐</h3>
        <div class="wrapper">
            <ul>
                <li v-for="item in newsongData" :key="item.id" @click="selectPlayList(item)">
                    <div class="infolistpic">
                        <img :src="item.picUrl" alt="">
                    </div>
                    <div class="text">
                        <div class="txt">
                            <span>{{item.name}}</span>
                        </div>
                        <div class="songnamebox">
                            <span v-for="artist in item.song.artists" :key="artist.id" class="songname">{{artist.name}}/</span>
                            <span>-{{item.song.album.name}}</span>
                        </div>
                    </div>
                    <div class="picture">
                        <span class="iconfont"> <i class="iconfont icon-70BasicIcons-all-64"></i></span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data(){
        return{
          newsongData:[],
          newsonginfo:{}
        };
    },
    methods:{
        getRelated(){
            axios.get("/api/personalized/newsong")
            .then(res => {
                console.log(res.data);
                console.log(res.data.result);
                this.newsongData=res.data.result;

            })
            .catch(err => {
                console.error(err); 
            })
        },
        selectPlayList(item){
        this.$store.commit("setSinger",item)//可以理解为是一个动作action,muation是同步服务
        const clickrankid = item.id//这里的item后面的值是拉取数据里面的真实数据
        this.$router.push({//路由管理器必须要加r
        name:'ClickTuiLi',
        //有多个参数时
        params:{id:clickrankid},
        //只有一个参数时
        // params:{playlistid},
        })
      // this.$router.push({
      //   path:`/playlistdetail/${playlistid}`
      // })
        },
    },
    mounted(){
        this.getRelated()
    }
}
</script>

<style scoped>
.recommendedsonglist{
    padding: 0;
    margin: 0 auto;
}
h3{
    border-left: 3px solid #f00;
    text-align: left;
    letter-spacing: 3px;
}
ul > li {
  display: inline-block;/**设置为行内元素，强制不换行，同时具备block */
}
.txt{
    text-align:left;
    width:250px;
    text-overflow:ellipsis;
    white-space:nowrap; 
    overflow:hidden;
}
.wrapper{
    text-align: left;
}
.txt > span{
    display: block;
    color: black;
    font-size: 20px;
    line-height: 30px;
}
.songname{
    color: grey;
    font-size: 15px;
    /* overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis;
    width: 40px;
    display: inline-block; */
}
.songnamebox{
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
    width: 250px;
}
.text{
    float: left;
    width: 280px;
    height: 50px;
    /* box-shadow: 5px 5px 5px red; */
    margin-bottom: 10px;
    float: left;
}
.picture{
    float: right;
    width: 30px;
    height: 30px;
    /* box-shadow: 5px 5px 5px black; */
}
.iconfont{
    color: green;
}
.infolistpic > img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.infolistpic{
    float: left;
    margin-right: 5px;
    margin-top: 5px;
}
</style>